<template>
  <div>
    <div class="operation-box">
      <el-button type="primary" @click="router.push('/setting/system/role/create')" :icon="Plus">添加角色</el-button>
    </div>

    <el-table :data="list" border empty-text="没有更多数据了">
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="number" width="100" label="管理员人数" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="text" @click="router.push(`/setting/system/role/create?id=${scope.row.id}`)" size="small">修改</el-button>
          <el-popconfirm confirmButtonText="确定" @confirm=" handleDelete(scope.row.id)" cancelButtonText="取消" cancelButtonType="default" title="删除后不可恢复，确定删除吗？">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { RoleList, DeleteRole } from '@/service/role'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()

const list = ref<Array>([])

const loadData = (): void => {
  RoleList().then((res: any) => {
    if (res.success) list.value = res.data
  })
}
const handleDelete = (id: number): void => {
  DeleteRole({ id: id }).then((res) => {
    if (res.success) {
      ElMessage.success('操作成功')
      loadData()
    } else ElMessage.error(res.msg)
  })
}
onMounted(() => {
  loadData()
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/tablePage.scss';
@import '@/assets/styles/formPage.scss';
</style>